<template>
  <div class="dynamic">
    <comhead></comhead>
    <div class="container main">
      <div class="head">
        <div>
          <img v-lazy="userInfo.img" alt=""><br/>
          <router-link to="avatar">修改头像</router-link>
        </div>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="说点什么吧"
          v-model="txt">
        </el-input>
        <!-- <textarea placeholder="说点什么吧" v-model="txt" name="txt" id="" cols="30" rows="10"></textarea> -->
        <el-button type="primary" @click="submit">发表</el-button>
      </div>
      <div class="list" v-for="(v,i) in list" :key="i">
        <!-- <img :src="'../assets/'+v.img+'.jpg'" alt=""> -->
        <div>
          <div>
            <img v-lazy="v.img" alt="">
            <span class="name">{{v.account}}:</span>
            <span class="txt">{{v.txt}}</span><br>
          </div>
          <p class="date">{{timestampToTime(v.date)}} <i @click="zan(v, i, $event)" :class="{'active done': v.zan && (v.zan.findIndex(val => { return userInfo.account === val }) > -1)}" class="iconfont icon-zan"></i><span v-if="v.zan && v.zan.length">{{v.zan.length}}</span></p>
        </div>
        <el-button v-show="v.account === userInfo.account" @click="del(i)" type="primary">删除</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import comhead from '@/components/header'
import { mapGetters } from 'vuex'
import {getAllDynamic, subDynamic, delDynamic, zan} from '@/api/api'
import {timestampToTime} from '@/utils/public'
export default {
  name: 'HelloWorld',
  data () {
    return {
      timestampToTime,
      txt: '',
      list: ''
    }
  },
  components: {
    comhead
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    console.log(this.$store.state)
    getAllDynamic().then(res => {
      this.list = res.data
    })
    // var params = {name: 'wise', info: 'wrong'}
    // this.$http.get('/api/test', {params}).then((data) => {
    //   console.log(data)
    // })
  },
  methods: {
    submit () {
      if (!this.txt.trim()) {
        return
      }
      var params = {
        id: parseInt(Math.random() * 10000000),
        account: this.userInfo.account,
        txt: this.txt,
        zan: [],
        img: this.userInfo.img
      }
      subDynamic(params).then(res => {
        this.txt = ''
        this.$message.success(res.msg)
        this.list.unshift({...params, date: new Date()})
      })
    },
    zan (v, i) {
      let index = v.zan.findIndex(v => { return v === this.userInfo.account })
      if (index === -1) {
        v.zan.push(this.userInfo.account)
      } else {
        v.zan.splice(index, 1)
      }
      this.$set(this.list, i, v)
      zan(v).then(res => {

      })
    },
    del (i) {
      const item = this.list[i]
      delDynamic({account: this.userInfo.account, txt: item.txt}).then(res => {
        this.$message.success(res.msg)
        this.list.splice(i, 1)
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .dynamic{
    .main{
      .head{
        padding: 20px 0 10px;
        display: flex;
        .el-textarea{
          margin: 0 12px;
        }
        a{
          display: block;
          text-align: center;
          color: rgb(255, 81, 0);
          line-height: 26px;
        }
        button{

        }
      }
    }
    img{
      width: 90px;
    }
    .list{
      border: 1px solid #FF4800;
      text-align: left;
      padding: 20px 40px;
      margin: 10px 0;
      display: flex;
      border-radius: 6px;
      >div{
        flex: 1;
        >div{
          display: flex;
          .name{
            line-height: 50px;
            padding: 0 20px 0 10px;
            font-weight: 600;
            color: #FF4800;
          }
          .txt{
            color: rgb(116, 33, 0);
          }
        }
        p{
          margin-top: 10px;
          color: rgb(250, 198, 177);
          i{
            margin-left: 20px;
            cursor: pointer;
            display: inline-block;
            position: relative;
            transform-origin: 0 10px;
            &.done{
              color: #FF4800;
              &+span{
                color: #FF4800;
              }
            }
            &.active{
              animation: animate 1s forwards;
            }
            @keyframes animate {
              0%{
                transform: rotate(0) scale(1);
                color: rgb(250, 198, 177);
              }
              30%{
                transform: rotate(-30deg) scale(2);
                color: rgb(250, 153, 115);
              }
              100%{
                transform: rotate(0) scale(1);
                color: rgb(255, 72, 0);
              }
            }
          }
        }
      }
      img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        vertical-align: middle;
        span{
          vertical-align: middle;
        }
      }
    }
  }
</style>
